<template>
  <div class="Index">
    <banner :imgs="banners" :swiperOptions="swiperOptions"></banner>
    <!-- 渲染下方分类列表 -->
    <div class="classify">
      <div class="category" v-for="(el, idx) in showData" :key="idx">
        <!-- eui, 栅格化 24 份 -->
        <h2>{{ el.name }}</h2>
        <el-row type="flex" class="row" justify="space-between">
          <!-- 组件 原生html元素
          <el-xxx>
            <div></div> -->
          <el-col
            :span="7"
            class="list-item"
            v-for="(el, idx) in el.list"
            :key="idx"
            @click.native="toDeatil(el.id)"
          >
            <img :src="el.pics[0]" alt="" />
            <div class="text-box">
              <span class="shopname">{{ el.name }}</span>
              <p class="desc">{{ el.desc }}</p>
            </div>
            <div class="price-box">
              <span>{{ el.sale_price }}</span>
              <br />
              <span>{{ el.price }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import banner from "@coms/base/banner.vue";
import { classify } from "@/api";
// 引入工具对象
import dataFormat from "../mixin/dataFormat";
export default {
  mixins: [dataFormat],
  data() {
    return {
      swiperOptions: {
        autoplay: true,
      },
      banners: [
        "https://www.casio.com.cn/images/ad/index/891/%E5%BC%80%E5%AD%A6%E5%AD%A3-banner-820x410.jpg",
        "https://www.casio.com.cn/images/ad/index/889/%E5%86%B0%E5%B7%9D%E9%87%91_banner-820x410.jpg",
        "https://www.casio.com.cn/images/ad/index/888/pokemon-banner-820x410.jpg",
        "https://www.casio.com.cn/images/ad/index/884/sheen%20%E9%97%AA%E8%80%80%E8%87%AA%E5%B7%B1banner-820x410-20210126.jpg",
      ],
      allData: [],
    };
  },
  async created() {
    // 如何获取 分类的数据并渲染?
    // 假设所需数据结构:
    //  {
    //     name: el.name,
    //     id: el.id,
    //     list: [],
    //   };
    // 1. 获取所有分类和对应的数据
    let cls = await classify();
    // console.log(cls.data.result, 111);
    // 2. 组装页面所需数据格式
    let allData = cls.data.result.map((el) => {
      let itemData = {
        name: el.name,
        id: el.id,
        list: [], // 默认为空数组, 下面处理
      };
      return itemData;
    });
    // console.log(allData, 222);
    // 3. 根据 id 请求数据, 并写进对应的 list
    allData.forEach(async (el) => {
      el.list = await this.get_classifys_data(el.id);
    });
    // 4. 拿到数据, 页面渲染
    this.allData = allData;
  },
  methods: {
    toDeatil(id) {
      this.$router.push(`/detail/${id}`);
    },
  },
  components: {
    banner,
  },
  computed: {
    // 过滤掉只有分类, 但无单品的分类
    showData() {
      return this.allData.filter((el) => el.list.length);
    },
  },
};
</script>

<style lang="scss" scoped>
.Index {
  .classify {
    padding: 0 10%;
    .category {
      .row {
        flex-wrap: wrap;
        text-align: center;
        .list-item {
          cursor: pointer;
          transition: all 0.2s;
          border-radius: 8px;
          padding: 60px 20px;
          &:hover {
            transform: translateY(-8px);
            box-shadow: 0 0 8px gray;
          }
          .text-box {
            .desc {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
  }
}
</style>